<template>
  <view class="u-p-20 selectPrintParameters" >
    <u-form ref="uForm" :model="printParametersFormData" label-width="auto">
      <view class="u-flex">
        <view style="flex: 1">
          <u-form-item label="页数：" prop="pagination">
            {{printParametersFormData.pagination}}
          </u-form-item>
          <u-form-item label="份数：" prop="copies">
            <u-input v-model="printParametersFormData.copies" type="number" :clearable="false"/>
          </u-form-item>
          <u-form-item label="颜色：" prop="color">
            <view class="u-flex select_input" @tap="showSelectPrintParametersColor = true">
              <view>
                <text v-if="printParametersOption.colorList.find(v=>v.id === printParametersFormData.color)">{{printParametersOption.colorList.find(v=>v.id === printParametersFormData.color).text}}</text>
                <text style="color:#c0c4cc" v-else>请选择颜色</text>
              </view>
              <view :class="['select_icon',showSelectPrintParametersColor && 'select_icon_rotate']">
                <u-icon name="arrow-down-fill" color="#c0c4cc"></u-icon>
              </view>
            </view>
            <u-action-sheet :list="printParametersOption.colorList" v-model="showSelectPrintParametersColor" @click="actionSelectPrintParametersColorCallback"/>
          </u-form-item>
          <u-form-item label="双面：" prop="twoSided">
            <!--              <u-input v-model="printParameters.sex" type="select" />-->
            <view class="u-flex select_input" @tap="showSelectPrintParametersTwoSided = true">
              <view>
                <text v-if="printParametersOption.twoSidedList.find(v=>v.id === printParametersFormData.twoSided)">
                  {{printParametersOption.twoSidedList.find(v=>v.id === printParametersFormData.twoSided).text}}
                </text>
                <text style="color:#c0c4cc" v-else>
                  请选择单双面
                </text>
              </view>
              <view :class="['select_icon',showSelectPrintParametersTwoSided && 'select_icon_rotate']">
                <u-icon name="arrow-down-fill" color="#c0c4cc"></u-icon>
              </view>
            </view>
            <u-action-sheet :list="printParametersOption.twoSidedList"
                            v-model="showSelectPrintParametersTwoSided"
                            @click="actionSelectPrintParametersTwoSidedCallback"/>
          </u-form-item>
        </view>
        <view style="flex: 1">
          <u-form-item label="开始页：" prop="startPage">
            <u-input v-model="printParametersFormData.startPage" type="number"  :clearable="false"/>
          </u-form-item>
          <u-form-item label="结束页：" prop="endPage">
            <u-input v-model="printParametersFormData.endPage" type="number" :clearable="false" />
          </u-form-item>
          <u-form-item label="纸张大小：" prop="paperSize">
            <view class="u-flex select_input" @tap="showSelectPrintParametersPaperSize = true">
              <view>
                <text v-if="printParametersOption.paperSizeList.find(v=>v.id === printParametersFormData.paperSize)">{{printParametersOption.paperSizeList.find(v=>v.id === printParametersFormData.paperSize).text}}</text>
                <text style="color:#c0c4cc" v-else>请选择纸张大小</text>
              </view>
              <view :class="['select_icon',showSelectPrintParametersPaperSize && 'select_icon_rotate']">
                <u-icon name="arrow-down-fill" color="#c0c4cc"></u-icon>
              </view>
            </view>
            <u-action-sheet :list="printParametersOption.paperSizeList" v-model="showSelectPrintParametersPaperSize" @click="actionSelectPrintParametersPaperSizeCallback"/>
          </u-form-item>
          <u-form-item label="纸张方向：" prop="direction">
            <view class="u-flex select_input" @tap="showSelectPrintParametersDirection = true">
              <view>
                <text v-if="printParametersOption.directionList.find(v=>v.id === printParametersFormData.direction)">{{printParametersOption.directionList.find(v=>v.id === printParametersFormData.direction).text}}</text>
                <text style="color:#c0c4cc" v-else>请选择纸张方向</text>
              </view>
              <view :class="['select_icon',showSelectPrintParametersDirection && 'select_icon_rotate']">
                <u-icon name="arrow-down-fill" color="#c0c4cc"></u-icon>
              </view>
            </view>
            <u-action-sheet :list="printParametersOption.directionList" v-model="showSelectPrintParametersDirection" @click="actionSelectPrintParametersDirectionCallback"/>
          </u-form-item>
        </view>
      </view>
    </u-form>
    <u-button @click="selectPrintParametersConfirm">确定</u-button>
  </view>
</template>

<script>
//选择打印参数
export default {
  name: "selectPrintParameters",
  data(){
    return{
      //提交的打印选项数据
      printParametersFormData:{
        copies:1,//份数
        color:0,//颜色
        twoSided:0,//双面
        startPage:1,//开始页
        endPage:1,//结束页
        paperSize:0,//纸张大小
        direction:0,//纸张方向
        pagination:10,//页数
      },
      printParametersOption:{//打印参数的范围
        colorList:[
          {
            text: '黑白',
            id:0,
          },
          {
            text: '彩色',
            id:1,
          }
        ],
        twoSidedList:[
          {
            text: '单面',
            id:0,
          },
          {
            text: '双面',
            id:1,
          }
        ],
        paperSizeList:[
          {
            text: 'A4',
            id:0,
          },
          {
            text: 'A3',
            id:1,
          }
        ],
        directionList:[
          {
            text: '纵向',
            id:0,
          },
          {
            text: '横向',
            id:1,
          }
        ]
      },
      //打印选项合法性验证规则
      rules: {
        startPage:[
          {
            type: Number,
            validator:(rule,value) => {
              return value >= 1 && value <= this.printParametersFormData.endPage
            },
            message: '不能大于结束页或小于1',
            // 可以单个或者同时写两个触发验证方式
            trigger: 'blur,change'
          }
        ],
        endPage:[
          {
            type: Number,
            validator:(rule,value) => {
              return value >= this.printParametersFormData.startPage && value <= this.printParametersFormData.pagination
            },
            message: '不能大于总页数或小于开始页',
            // 可以单个或者同时写两个触发验证方式
            trigger: 'blur,change'
          }
        ]
      },
      showSelectPrintParametersColor:false,//选择打印参数》色彩
      showSelectPrintParametersTwoSided:false,//选择打印参数》单双面
      showSelectPrintParametersPaperSize:false,//选择打印参数》纸张大小
      showSelectPrintParametersDirection:false,//选择打印参数》纸张方向
    }
  },
  mounted(){
    this.$refs.uForm.setRules(this.rules);
  },
  methods:{
    actionSelectPrintParametersColorCallback(index){
      this.printParametersFormData.color = this.printParametersOption.colorList[index].id;
    },
    actionSelectPrintParametersTwoSidedCallback(index){
      this.printParametersFormData.twoSided = this.printParametersOption.twoSidedList[index].id;
    },
    actionSelectPrintParametersPaperSizeCallback(index){
      this.printParametersFormData.paperSize = this.printParametersOption.paperSizeList[index].id;
    },
    actionSelectPrintParametersDirectionCallback(index){
      this.printParametersFormData.direction = this.printParametersOption.directionList[index].id;
    },
    selectPrintParametersConfirm(){
      this.$refs.uForm.validate(valid => {
        if (valid) {
          console.log('验证成功');
          this.$emit('confirm',this.printParametersFormData)
        } else {
          console.log('验证失败');
        }
      });
    }
  }
}
</script>

<style scoped>

</style>
